<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/fronter' }" style="font-size:18px">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/waiter_info' }" style="font-size:18px">服务员信息</el-breadcrumb-item
      >
    </el-breadcrumb>

    <el-card style="font-size: 24px; text-align: left" >

      <div style="margin: 10px 0">
        <el-input v-model="search" placeholder="请输入关键字" style="width: 260px" clearable></el-input>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 5px" @click="load">查询</el-button>
      </div>

      <el-table :data="waiterlist" border stripe height="400px">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="姓名" prop="waitername"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="工号" prop="waiterid"></el-table-column>
        <el-table-column label="电话号码" prop="phonenumber"></el-table-column>
        <el-table-column label="管理桌号" prop="tableid"></el-table-column>
      </el-table>
      <span class="demonstration" style="font-size: 12px">显示总数</span>
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </el-card>

  </div>
</template>



<script>
  import request from"../../utils/request";

  export default {
    name: "Home",

    data() {
      return {
        search: '',
        currentPage: 1,
        pageSize: 10,
        total: 0,
        waiterlist: []
      };
    },
    created() {
      this.load()
    },
    methods: {
      load() {
        request.get("waitermanager", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search
          }
        }).then(res => {
          console.log(res);
          this.waiterlist = res.data.records;
          this.total = res.data.total;
        })
      },
      handleSizeChange(pageSize) {//改变当前每页个数触发
        this.pageSize = pageSize;
        this.load()
      },
      handleCurrentChange(pageNum) {//改变当前页码触发
        this.currentPage = pageNum;
        this.load()
      },
      addCateDialogClosed() {
        this.$refs.addCateFormRef.resetFields()
        this.selectedKeys = []
        this.addCateForm.cat_level = 0
        this.addCateForm.cat_pid = 0
      },
      //退出
      signout() {
        this.$confirm("退出登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$router.push({path: "/login.html"});
        });
      }
    }
  }

</script>
<style scoped>
.container {
  height: 100vh;
  font-size: 15px;
}
.header {
  background: #131518;
  color: rgb(255, 255, 255);
}
.aside {
  background: #3a3a3a;
  color: #fff;
  /* height: 100%; */
}
.main {
  /* height: 100%; */
  color: #a50b0b;
}
.headerlogo {
  line-height: 60px;
  margin-top: 10px;
}
.rightsection {
  line-height: 60px;
  text-align: center;
}

.el-breadcrumb{
    margin-bottom: 15px;
    font-size:15px;
}
</style>
